<template>
  <div class="home">
    <van-row>
      <van-col span="24">
        <van-tabs
          sticky
          color="#E32DAB"
          title-active-color="#E32DAB"
          :line-width="100"
          :line-height="2"
          @click="onClick"
        >
          <van-tab
            v-for="item in categories"
            :key="item.type"
            :title="item.name"
            class="tab"
          >
            <van-card
              v-for="phone in phones"
              :key="phone.id"
              :price="phone.price"
              :desc="phone.desc"
              :title="phone.title"
              :thumb="phone.thumb"
            >
              <template #tags>
                <van-tag
                  v-for="tag in phone.tag"
                  :key="tag.name"
                  color="#f2826a"
                  style="margin-left: 5px;"
                >
                  {{ tag.name }}
                </van-tag>
              </template>
              <template #footer>
                <van-button
                  round
                  type="info"
                  size="mini"
                  @click="buy(phone.id)"
                >
                  购买
                </van-button>
              </template>
            </van-card>
          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
    >
      <template #sku-actions="props">
        <div class="van-sku-actions">
          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <van-button
            square
            size="large"
            type="danger"
            @click="props.skuEventBus.$emit('sku:buy')"
          >
            买买买
          </van-button>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import axios from "axios";

@Component
export default class Home extends Vue {
  private categories = [];
  private phones = [];
  private show = false;
  private sku = "";
  private goods = "";

  protected created() {
    axios.get("http://localhost:8081/phone/index").then((res: any) => {
      this.categories = res.data.data.categories;
      this.phones = res.data.data.phones;
    });
  }

  protected onClick(name: number, title: string) {
    const type = this.categories[name].type;
    axios
      .get(`http://localhost:8081/phone/findByCategoryType/${type}`)
      .then((res) => {
        this.phones = res.data.data;
      });
  }

  protected buy(phoneId: number) {
    this.show = true;

    axios
      .get(`http://localhost:8081/phone/findSpecsByPhoneId/${phoneId}`)
      .then((res) => {
        console.log(res.data);
        this.goods = res.data.data.goods;
        this.sku = res.data.data.sku;
      });
  }

  protected onBuyClicked(item: object) {
    this.$store.state.specsId = item.selectedSkuComb.s1;
    this.$store.state.quantity = item.selectedNum;
    this.$router.push("/addressList");
  }
}
</script>
